<template>
  <view class="intl-tel-input-container">
    <view class="selected-flag" @click.stop="handleShowAndFlyTo"
         :title="`${currentData.name}: + ${currentData.dialCode}`">
      <view :class="['flag', `flag-${currentData.code}`, 'cur-flag']"></view>
      <text class="area-codeNum" :title="`${currentData.name}: + ${currentData.dialCode}`">+{{currentData.dialCode}}</text>
      <i class="tran"></i>
    </view>
    <transition name="fade">
      <view v-if="hideSubMenu" class="flag-list-box scroll-bar" @click.stop="hideSubMenu = true">
        <input v-model="countryName" type="text" class="search-input" placeholder="The Country Name">
        <ul class="country-list">
          <li v-for="(item, index) in filterCountries"
              :key="index"
              :class="['list-item', {'highlight': item.dialCode === currentCode}]"
              @click.stop="handleItemClick(item)"
          >
            <view :class="['flag', `flag-${item.code}`]"></view>
            <text class="country-name">{{ item.name }}</text>
            <text class="dial-code"> +{{ item.dialCode }}</text>
          </li>
        </ul>
      </view>
    </transition>
  </view>
</template>
<script>
  import countryListData from './assets/countryData.json'
  export default {
    name: 'countryCodeSelector',
    props: {
      /*
      * @description 国际区号
      * */
      countryCode: {
        type: Number,
        default: 86
      }
    },
    data () {
      return {
        countryName: '',
        hideSubMenu: false,
        currentCode: this.countryCode,
        countryList: []
      }
    },
    computed: {
      // 根据props传过来的国际区号检索出所在的整个对象
      currentData () {
        return this.countryList.filter((item) => {
          return Object.keys(item).some((key) => {
            return item[key] === this.currentCode
          })
        })[0]
      },
      // 根据输入框的内容进行模糊检索
      filterCountries () {
        if (this.countryName) {
          return this.countryList.filter((item) => {
            return Object.keys(item).some((key) => {
              return String(item[key]).toLowerCase().indexOf(this.countryName.toLowerCase()) > -1
            })
          })
        } else {
          return this.countryList
        }
      }
    },
    created() {
      // 拿到JSON里面的国家区号数据并赋值到本地data中
      this.countryList = countryListData
    },
    methods: {
      handleShowAndFlyTo () {
        this.hideSubMenu = !this.hideSubMenu
        if (this.hideSubMenu) {
          document.addEventListener('click', () => {
            this.hideSubMenu = false
          })
          setTimeout(() => {
            document.querySelector('.highlight').scrollIntoView({
              block: 'center',
              behavior: 'smooth'
            })
          }, 100)
        }
      },
      handleItemClick (obj) {
        this.hideSubMenu = !this.hideSubMenu;
        this.currentCode = obj.dialCode
        // 更改父组件的值
        this.$emit('update:countryCode', obj.dialCode)
        setTimeout(() => {
          document.querySelector('.highlight').scrollIntoView({
            block: 'center',
            behavior: 'smooth'
          })
        }, 100)
      }
    }
  }
</script>
<style scoped>
  ul,li {
 	padding:0;
 	margin:0;
 }
 .intl-tel-input-container {
 	position:relative;
 	padding:0 20rpx;
 	font-family:"lucida grande","lucida sans unicode",lucida,helvetica,"Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
 }
 .selected-flag {
 	user-select:none;
 	cursor:pointer;
 	display:flex;
 	align-items:center;
 }
 .flag-list-box {
 	z-index:10;
 	position:absolute;
 	left:0;
 	top:80rpx;
 	padding:20rpx;
 	width:400rpx;
 	height:600rpx;
 	overflow:auto;
 	background-color:#fff;
 	border:2rpx solid #E5E5E5;
 	border-radius:20rpx;
 }
 .search-input {
 	width:100%;
 	padding-left:10rpx;
 	box-sizing:border-box;
 	outline:none;
 	color:#303133;
 	font-size:24rpx;
 	border:2rpx solid #E5E5E5;
 	border-radius:10rpx;
 	background-color:transparent;
 }
 input::-webkit-input-placeholder {
 	color:#CCCCCC;
 	font-size:24rpx;
 }
 .country-list {
 	margin-top:-40rpx;
 	list-style:none;
 }
 .list-item {
 	margin:20rpx 0;
 	font-size:24rpx;
 	line-height:1.5;
 	color:#888;
 	cursor:pointer;
 	user-select:none;
 }
 .list-item:hover {
 	color:#1989fa;
 }
 .list-item:first-child {
 	margin-top:60rpx;
 }
 .list-item:last-child {
 	margin-bottom:0;
 }
 .country-name {
 	margin-left:10rpx;
 }
 .dial-code {
 	/*font-weight:bold;
 	*/
 }
 .area-codeNum {
 	padding:20rpx;
 	display:inline-block;
 	font-size:28rpx;
 	position:relative;
 }
 .tran {
 	margin-top:10rpx;
 	margin-left:-6rpx;
 	border-width:10rpx;
 	border-style:solid;
 	border-color:#434343 transparent transparent;
 }
 .highlight {
 	font-weight:bold;
 	color:#1989fa;
 }
 /*滚动条样式*/
   /*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
   .scroll-bar::-webkit-scrollbar {
 	width:12rpx;
 	height:20rpx;
 	border-radius:30rpx;
 	background-color:transparent;
 }
 /*定义滚动条的轨道，内阴影及圆角*/
   .scroll-bar::-webkit-scrollbar-track {
 	-webkit-box-shadow:inset 0 0 12rpx #E5E5E5;
 	background-color:transparent;
 	border-radius:30rpx;
 }
 /*定义滑块，内阴影及圆角*/
   .scroll-bar::-webkit-scrollbar-thumb {
 	height:40rpx;
 	border-radius:30rpx;
 	-webkit-box-shadow:inset 0 0 12rpx #CCCCCC;
 	background-color:#888;
 }
 .fade-enter-active,.fade-leave-active {
 	transition:opacity .5s;
 }
 .fade-enter,.fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
 	opacity:0;
 }
 .flag {
 	display:inline-block;
 	position:relative;
 	width:32rpx;
 	height:22rpx;
 	background:url('./assets/img/flags.png') no-repeat
 }
 .flag.flag-gu {
 	background-position:-192rpx -110rpx
 }
 .flag.flag-mn {
 	background-position:-416rpx -176rpx
 }
 .flag.flag-va {
 	background-position:-96rpx -308rpx
 }
 .flag.flag-tibet {
 	background-position:-64rpx -286rpx
 }
 .flag.flag-fo {
 	background-position:-128rpx -88rpx
 }
 .flag.flag-th {
 	background-position:-32rpx -286rpx
 }
 .flag.flag-tr {
 	background-position:-288rpx -286rpx
 }
 .flag.flag-tl {
 	background-position:-160rpx -286rpx
 }
 .flag.flag-kz {
 	background-position:-288rpx -154rpx
 }
 .flag.flag-zm {
 	background-position:-32rpx -330rpx
 }
 .flag.flag-uz {
 	background-position:-64rpx -308rpx
 }
 .flag.flag-dk {
 	background-position:-128rpx -66rpx
 }
 .flag.flag-scotland {
 	background-position:-352rpx -242rpx
 }
 .flag.flag-gi {
 	background-position:-448rpx -88rpx
 }
 .flag.flag-gy {
 	background-position:-256rpx -110rpx
 }
 .flag.flag-bj {
 	background-position:-224rpx -22rpx
 }
 .flag.flag-fr {
 	background-position:-160rpx -88rpx
 }
 .flag.flag-mo {
 	background-position:-448rpx -176rpx
 }
 .flag.flag-ir {
 	background-position:-224rpx -132rpx
 }
 .flag.flag-io {
 	background-position:-160rpx -132rpx
 }
 .flag.flag-tm {
 	background-position:-192rpx -286rpx
 }
 .flag.flag-ch {
 	background-position:-192rpx -44rpx
 }
 .flag.flag-mt {
 	background-position:-64rpx -198rpx
 }
 .flag.flag-nl {
 	background-position:-480rpx -198rpx
 }
 .flag.flag-gp {
 	background-position:-32rpx -110rpx
 }
 .flag.flag-im {
 	background-position:-96rpx -132rpx
 }
 .flag.flag-tv {
 	background-position:-352rpx -286rpx
 }
 .flag.flag-mu {
 	background-position:-96rpx -198rpx
 }
 .flag.flag-pe {
 	background-position:-192rpx -220rpx
 }
 .flag.flag-vi {
 	background-position:-224rpx -308rpx
 }
 .flag.flag-hn {
 	background-position:-352rpx -110rpx
 }
 .flag.flag-ss {
 	background-position:-256rpx -264rpx
 }
 .flag.flag-ae {
 	background-position:-32rpx 0
 }
 .flag.flag-td {
 	background-position:-480rpx -264rpx
 }
 .flag.flag-pw {
 	background-position:0 -242rpx
 }
 .flag.flag-nu {
 	background-position:-64rpx -220rpx
 }
 .flag.flag-bt {
 	background-position:-416rpx -22rpx
 }
 .flag.flag-ms {
 	background-position:-32rpx -198rpx
 }
 .flag.flag-cv {
 	background-position:-480rpx -44rpx
 }
 .flag.flag-es {
 	background-position:-448rpx -66rpx
 }
 .flag.flag-mh {
 	background-position:-288rpx -176rpx
 }
 .flag.flag-la {
 	background-position:-320rpx -154rpx
 }
 .flag.flag-vn {
 	background-position:-256rpx -308rpx
 }
 .flag.flag-py {
 	background-position:-32rpx -242rpx
 }
 .flag.flag-br {
 	background-position:-352rpx -22rpx
 }
 .flag.flag-ye {
 	background-position:-448rpx -308rpx
 }
 .flag.flag-ie {
 	background-position:0 -132rpx
 }
 .flag.flag-gh {
 	background-position:-416rpx -88rpx
 }
 .flag.flag-cg {
 	background-position:-160rpx -44rpx
 }
 .flag.flag-cu {
 	background-position:-448rpx -44rpx
 }
 .flag.flag-hu {
 	background-position:-448rpx -110rpx
 }
 .flag.flag-sg {
 	background-position:-448rpx -242rpx
 }
 .flag.flag-at {
 	background-position:-352rpx 0
 }
 .flag.flag-lk {
 	background-position:-448rpx -154rpx
 }
 .flag.flag-vu {
 	background-position:-288rpx -308rpx
 }
 .flag.flag-bo {
 	background-position:-320rpx -22rpx
 }
 .flag.flag-jo {
 	background-position:-416rpx -132rpx
 }
 .flag.flag-er {
 	background-position:-416rpx -66rpx
 }
 .flag.flag-za {
 	background-position:-512rpx -308rpx
 }
 .flag.flag-rs {
 	background-position:-160rpx -242rpx
 }
 .flag.flag-nr {
 	background-position:-32rpx -220rpx
 }
 .flag.flag-ls {
 	background-position:-512rpx -154rpx
 }
 .flag.flag-jm {
 	background-position:-384rpx -132rpx
 }
 .flag.flag-tz {
 	background-position:-416rpx -286rpx
 }
 .flag.flag-ki {
 	background-position:-32rpx -154rpx
 }
 .flag.flag-sj {
 	background-position:0 -264rpx
 }
 .flag.flag-cz {
 	background-position:-32rpx -66rpx
 }
 .flag.flag-pg {
 	background-position:-256rpx -220rpx
 }
 .flag.flag-lv {
 	background-position:-64rpx -176rpx
 }
 .flag.flag-do {
 	background-position:-192rpx -66rpx
 }
 .flag.flag-lu {
 	background-position:-32rpx -176rpx
 }
 .flag.flag-no {
 	background-position:-512rpx -198rpx
 }
 .flag.flag-kw {
 	background-position:-224rpx -154rpx
 }
 .flag.flag-mx {
 	background-position:-192rpx -198rpx
 }
 .flag.flag-yt {
 	background-position:-480rpx -308rpx
 }
 .flag.flag-ly {
 	background-position:-96rpx -176rpx
 }
 .flag.flag-cy {
 	background-position:0 -66rpx
 }
 .flag.flag-ph {
 	background-position:-288rpx -220rpx
 }
 .flag.flag-my {
 	background-position:-224rpx -198rpx
 }
 .flag.flag-sm {
 	background-position:-96rpx -264rpx
 }
 .flag.flag-et {
 	background-position:-480rpx -66rpx
 }
 .flag.flag-ru {
 	background-position:-192rpx -242rpx
 }
 .flag.flag-tj {
 	background-position:-96rpx -286rpx
 }
 .flag.flag-ai {
 	background-position:-128rpx 0
 }
 .flag.flag-pl {
 	background-position:-352rpx -220rpx
 }
 .flag.flag-kp {
 	background-position:-128rpx -154rpx
 }
 .flag.flag-uy {
 	background-position:-32rpx -308rpx
 }
 .flag.flag-gb {
 	background-position:-224rpx -88rpx
 }
 .flag.flag-gs {
 	background-position:-128rpx -110rpx
 }
 .flag.flag-kurdistan {
 	background-position:-192rpx -154rpx
 }
 .flag.flag-rw {
 	background-position:-224rpx -242rpx
 }
 .flag.flag-ec {
 	background-position:-256rpx -66rpx
 }
 .flag.flag-mm {
 	background-position:-384rpx -176rpx
 }
 .flag.flag-pa {
 	background-position:-160rpx -220rpx
 }
 .flag.flag-wales {
 	background-position:-320rpx -308rpx
 }
 .flag.flag-kg {
 	background-position:-512rpx -132rpx
 }
 .flag.flag-ve {
 	background-position:-160rpx -308rpx
 }
 .flag.flag-tk {
 	background-position:-128rpx -286rpx
 }
 .flag.flag-ca {
 	background-position:-32rpx -44rpx
 }
 .flag.flag-is {
 	background-position:-256rpx -132rpx
 }
 .flag.flag-ke {
 	background-position:-480rpx -132rpx
 }
 .flag.flag-ro {
 	background-position:-128rpx -242rpx
 }
 .flag.flag-gq {
 	background-position:-64rpx -110rpx
 }
 .flag.flag-pt {
 	background-position:-512rpx -220rpx
 }
 .flag.flag-tf {
 	background-position:-512rpx -264rpx
 }
 .flag.flag-ad {
 	background-position:0 0
 }
 .flag.flag-sk {
 	background-position:-32rpx -264rpx
 }
 .flag.flag-pm {
 	background-position:-384rpx -220rpx
 }
 .flag.flag-om {
 	background-position:-128rpx -220rpx
 }
 .flag.flag-an {
 	background-position:-224rpx 0
 }
 .flag.flag-ws {
 	background-position:-384rpx -308rpx
 }
 .flag.flag-sh {
 	background-position:-480rpx -242rpx
 }
 .flag.flag-mp {
 	background-position:-480rpx -176rpx
 }
 .flag.flag-gt {
 	background-position:-160rpx -110rpx
 }
 .flag.flag-cf {
 	background-position:-128rpx -44rpx
 }
 .flag.flag-zanzibar {
 	background-position:0 -330rpx
 }
 .flag.flag-mw {
 	background-position:-160rpx -198rpx
 }
 .flag.flag-catalonia {
 	background-position:-64rpx -44rpx
 }
 .flag.flag-ug {
 	background-position:-480rpx -286rpx
 }
 .flag.flag-je {
 	background-position:-352rpx -132rpx
 }
 .flag.flag-km {
 	background-position:-64rpx -154rpx
 }
 .flag.flag-in {
 	background-position:-128rpx -132rpx
 }
 .flag.flag-bf {
 	background-position:-96rpx -22rpx
 }
 .flag.flag-mc {
 	background-position:-160rpx -176rpx
 }
 .flag.flag-sy {
 	background-position:-384rpx -264rpx
 }
 .flag.flag-sn {
 	background-position:-128rpx -264rpx
 }
 .flag.flag-kr {
 	background-position:-160rpx -154rpx
 }
 .flag.flag-eu {
 	background-position:-512rpx -66rpx
 }
 .flag.flag-bn {
 	background-position:-288rpx -22rpx
 }
 .flag.flag-st {
 	background-position:-288rpx -264rpx
 }
 .flag.flag-england {
 	background-position:-384rpx -66rpx
 }
 .flag.flag-lc {
 	background-position:-384rpx -154rpx
 }
 .flag.flag-dm {
 	background-position:-160rpx -66rpx
 }
 .flag.flag-be {
 	background-position:-64rpx -22rpx
 }
 .flag.flag-ni {
 	background-position:-448rpx -198rpx
 }
 .flag.flag-ua {
 	background-position:-448rpx -286rpx
 }
 .flag.flag-mz {
 	background-position:-256rpx -198rpx
 }
 .flag.flag-pf {
 	background-position:-224rpx -220rpx
 }
 .flag.flag-tn {
 	background-position:-224rpx -286rpx
 }
 .flag.flag-ee {
 	background-position:-288rpx -66rpx
 }
 .flag.flag-xk {
 	background-position:-416rpx -308rpx
 }
 .flag.flag-sx {
 	background-position:-352rpx -264rpx
 }
 .flag.flag-sd {
 	background-position:-384rpx -242rpx
 }
 .flag.flag-gd {
 	background-position:-256rpx -88rpx
 }
 .flag.flag-ci {
 	background-position:-224rpx -44rpx
 }
 .flag.flag-sz {
 	background-position:-416rpx -264rpx
 }
 .flag.flag-cl {
 	background-position:-288rpx -44rpx
 }
 .flag.flag-fi {
 	background-position:0 -88rpx
 }
 .flag.flag-ga {
 	background-position:-192rpx -88rpx
 }
 .flag.flag-jp {
 	background-position:-448rpx -132rpx
 }
 .flag.flag-de {
 	background-position:-64rpx -66rpx
 }
 .flag.flag-np {
 	background-position:0 -220rpx
 }
 .flag.flag-re {
 	background-position:-96rpx -242rpx
 }
 .flag.flag-bg {
 	background-position:-128rpx -22rpx
 }
 .flag.flag-sc {
 	background-position:-320rpx -242rpx
 }
 .flag.flag-ng {
 	background-position:-416rpx -198rpx
 }
 .flag.flag-qa {
 	background-position:-64rpx -242rpx
 }
 .flag.flag-mk {
 	background-position:-320rpx -176rpx
 }
 .flag.flag-aw {
 	background-position:-416rpx 0
 }
 .flag.flag-kn {
 	background-position:-96rpx -154rpx
 }
 .flag.flag-al {
 	background-position:-160rpx 0
 }
 .flag.flag-bw {
 	background-position:-480rpx -22rpx
 }
 .flag.flag-um {
 	background-position:-512rpx -286rpx
 }
 .flag.flag-ky {
 	background-position:-256rpx -154rpx
 }
 .flag.flag-tt {
 	background-position:-320rpx -286rpx
 }
 .flag.flag-so {
 	background-position:-160rpx -264rpx
 }
 .flag.flag-lt {
 	background-position:0 -176rpx
 }
 .flag.flag-by {
 	background-position:-512rpx -22rpx
 }
 .flag.flag-bb {
 	background-position:0 -22rpx
 }
 .flag.flag-us {
 	background-position:0 -308rpx
 }
 .flag.flag-md {
 	background-position:-192rpx -176rpx
 }
 .flag.flag-ag {
 	background-position:-96rpx 0
 }
 .flag.flag-hm {
 	background-position:-320rpx -110rpx
 }
 .flag.flag-as {
 	background-position:-320rpx 0
 }
 .flag.flag-eg {
 	background-position:-320rpx -66rpx
 }
 .flag.flag-sv {
 	background-position:-320rpx -264rpx
 }
 .flag.flag-sl {
 	background-position:-64rpx -264rpx
 }
 .flag.flag-fk {
 	background-position:-64rpx -88rpx
 }
 .flag.flag-am {
 	background-position:-192rpx 0
 }
 .flag.flag-ck {
 	background-position:-256rpx -44rpx
 }
 .flag.flag-tw {
 	background-position:-384rpx -286rpx
 }
 .flag.flag-kh {
 	background-position:0 -154rpx
 }
 .flag.flag-to {
 	background-position:-256rpx -286rpx
 }
 .flag.flag-se {
 	background-position:-416rpx -242rpx
 }
 .flag.flag-cd {
 	background-position:-96rpx -44rpx
 }
 .flag.flag-pn {
 	background-position:-416rpx -220rpx
 }
 .flag.flag-gr {
 	background-position:-96rpx -110rpx
 }
 .flag.flag-id {
 	background-position:-512rpx -110rpx
 }
 .flag.flag-vc {
 	background-position:-128rpx -308rpx
 }
 .flag.flag-somaliland {
 	background-position:-192rpx -264rpx
 }
 .flag.flag-bi {
 	background-position:-192rpx -22rpx
 }
 .flag.flag-pk {
 	background-position:-320rpx -220rpx
 }
 .flag.flag-pr {
 	background-position:-448rpx -220rpx
 }
 .flag.flag-bd {
 	background-position:-32rpx -22rpx
 }
 .flag.flag-co {
 	background-position:-384rpx -44rpx
 }
 .flag.flag-fm {
 	background-position:-96rpx -88rpx
 }
 .flag.flag-bm {
 	background-position:-256rpx -22rpx
 }
 .flag.flag-ar {
 	background-position:-288rpx 0
 }
 .flag.flag-bv {
 	background-position:-448rpx -22rpx
 }
 .flag.flag-sb {
 	background-position:-288rpx -242rpx
 }
 .flag.flag-mq {
 	background-position:-512rpx -176rpx
 }
 .flag.flag-eh {
 	background-position:-352rpx -66rpx
 }
 .flag.flag-bh {
 	background-position:-160rpx -22rpx
 }
 .flag.flag-it {
 	background-position:-288rpx -132rpx
 }
 .flag.flag-hr {
 	background-position:-384rpx -110rpx
 }
 .flag.flag-sa {
 	background-position:-256rpx -242rpx
 }
 .flag.flag-mv {
 	background-position:-128rpx -198rpx
 }
 .flag.flag-mg {
 	background-position:-256rpx -176rpx
 }
 .flag.flag-dz {
 	background-position:-224rpx -66rpx
 }
 .flag.flag-gg {
 	background-position:-384rpx -88rpx
 }
 .flag.flag-gm {
 	background-position:-512rpx -88rpx
 }
 .flag.flag-af {
 	background-position:-64rpx 0
 }
 .flag.flag-li {
 	background-position:-416rpx -154rpx
 }
 .flag.flag-sr {
 	background-position:-224rpx -264rpx
 }
 .flag.flag-vg {
 	background-position:-192rpx -308rpx
 }
 .flag.flag-cr {
 	background-position:-416rpx -44rpx
 }
 .flag.flag-tc {
 	background-position:-448rpx -264rpx
 }
 .flag.flag-ao {
 	background-position:-256rpx 0
 }
 .flag.flag-ma {
 	background-position:-128rpx -176rpx
 }
 .flag.flag-mr {
 	background-position:0 -198rpx
 }
 .flag.flag-gn {
 	background-position:0 -110rpx
 }
 .flag.flag-ne {
 	background-position:-352rpx -198rpx
 }
 .flag.flag-nf {
 	background-position:-384rpx -198rpx
 }
 .flag.flag-wf {
 	background-position:-352rpx -308rpx
 }
 .flag.flag-hk {
 	background-position:-288rpx -110rpx
 }
 .flag.flag-gf {
 	background-position:-320rpx -88rpx
 }
 .flag.flag-ps {
 	background-position:-480rpx -220rpx
 }
 .flag.flag-ic {
 	background-position:-480rpx -110rpx
 }
 .flag.flag-cw {
 	background-position:-512rpx -44rpx
 }
 .flag.flag-ml {
 	background-position:-352rpx -176rpx
 }
 .flag.flag-ax {
 	background-position:-448rpx 0
 }
 .flag.flag-gl {
 	background-position:-480rpx -88rpx
 }
 .flag.flag-dj {
 	background-position:-96rpx -66rpx
 }
 .flag.flag-cn {
 	background-position:-352rpx -44rpx
 }
 .flag.flag-ht {
 	background-position:-416rpx -110rpx
 }
 .flag.flag-lr {
 	background-position:-480rpx -154rpx
 }
 .flag.flag-tg {
 	background-position:0 -286rpx
 }
 .flag.flag-ba {
 	background-position:-512rpx 0
 }
 .flag.flag-ge {
 	background-position:-288rpx -88rpx
 }
 .flag.flag-bz {
 	background-position:0 -44rpx
 }
 .flag.flag-au {
 	background-position:-384rpx 0
 }
 .flag.flag-iq {
 	background-position:-192rpx -132rpx
 }
 .flag.flag-cm {
 	background-position:-320rpx -44rpx
 }
 .flag.flag-gw {
 	background-position:-224rpx -110rpx
 }
 .flag.flag-az {
 	background-position:-480rpx 0
 }
 .flag.flag-na {
 	background-position:-288rpx -198rpx
 }
 .flag.flag-fj {
 	background-position:-32rpx -88rpx
 }
 .flag.flag-zw {
 	background-position:-64rpx -330rpx
 }
 .flag.flag-bs {
 	background-position:-384rpx -22rpx
 }
 .flag.flag-il {
 	background-position:-32rpx -132rpx
 }
 .flag.flag-nz {
 	background-position:-96rpx -220rpx
 }
 .flag.flag-me {
 	background-position:-224rpx -176rpx
 }
 .flag.flag-si {
 	background-position:-512rpx -242rpx
 }
 .flag.flag-nc {
 	background-position:-320rpx -198rpx
 }
 .flag.flag-lb {
 	background-position:-352rpx -154rpx
 }

</style>
